.main-layout-container {
    height: 100vh;
}

.main-header {
    background-color: #2f4056;
    color: white;
    /* line-height: 60px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.main-body {
    height: calc(100vh - 60px);
}

.primary-menu {
    background-color: #fff;
    border-right: 1px solid #e6e6e6;
}

.primary-menu .el-menu {
    border-right: none;
}

.content-wrapper {
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    /* 统一设置一个底色 */
}

/* 一级面包屑样式 */
.content-header-primary {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background-color: #fff;
    /* border-bottom: 1px solid #dcdfe6; */
    flex-shrink: 0;
    /* 固定高度 */
    /* 【新增】这一行是实现左右布局的关键 */
    justify-content: space-between;
}

/* 二级标题栏样式 */
.content-header-secondary {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background-color: #fff;
    /* 增加一个下边框，与内容区分隔 */
    /* border-bottom: 1px solid #f0f0f0; */
    border-bottom: 1px solid #dcdfe6;
    flex-shrink: 0;
    /* 固定高度 */
}

.el-divider--vertical {
    height: 1.6em;
    /* 控制竖线高度 */
    margin: 0 16px;
    /* 控制左右间距 */
    border-left: 1px solid #e6e6e6;
    /* 控制颜色 */
}

.back-button {
    font-size: 14px;
    padding: 0;
    margin-right: 16px;
    color: #606266;
}

.page-title {
    font-size: 18px;
    font-weight: 500;
    color: #303133;
}

/* 主内容区样式 */
.content-main {
    flex-grow: 1;
    /* 占据所有剩余空间 */
    overflow-y: auto;
    padding: 0;
    /* 让 BucketDetailLayout 自己决定布局 */
}

/*
  =======================================================
  ==   【最终、正确的】侧边栏收起/展开的动画和布局样式     ==
  =======================================================
*/

/* 1. 为相关元素设置过渡动画 */
.primary-menu,
.content-wrapper,
.sidebar-toggler-v2 {
    transition: all 0.3s ease-in-out;
}

/* 2. 侧边栏的默认（展开）宽度 */
.primary-menu {
    width: 200px;
}

/* 3. 侧边栏【收起时】的宽度 */
.primary-menu.is-collapsed {
    width: 0px;
    overflow: hidden;
}

/*
  =======================================================
  ==          悬浮触发器按钮样式 v2 (最终版)           ==
  =======================================================
*/
.sidebar-toggler-v2 {
    position: absolute;
    /* 【修改】top值需要加上header的高度，假设header是60px */
    top: calc(60px + (100vh - 60px) / 2);
    /* header高度 + 剩余高度的一半 */

    /* 默认（展开时）的位置，位于200px处 */
    left: 200px;

    transform: translateY(-50%);

    width: 20px;
    height: 48px;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 0 6px 6px 0;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #909399;
    font-size: 14px;
    z-index: 10;
}

.sidebar-toggler-v2:hover {
    background-color: #e4e7ed;
}

/* 当侧边栏【收起时】，按钮的位置 */
.sidebar-toggler-v2.is-collapsed {
    left: 0px;
}

.user-info .el-dropdown-link {
    /* 1. 自身也成为一个flex容器，以便控制内部元素的对齐 */
    display: flex;
    align-items: center;

    /* 2. 让它填满父容器的高度，给 align-items 提供对齐基准 */
    height: 100%;

    /* 3. 外观样式 */
    cursor: pointer;
    color: var(--el-color-primary-light-9);
    font-size: 14px;
    /* 明确字体大小 */
}

.user-info .el-dropdown-link:hover {
    color: var(--el-color-primary);
}

.user-icon {
    margin-right: 8px;
    font-size: 16px;
    /* 微调图标大小，使其更协调 */
}

/* 去掉 router-link 的下划线和默认颜色 */
.menu-link {
    text-decoration: none;
    color: inherit;
}